<template>
    <img v-if="type==2" style="width:100%" :src="imgUrl"/>
    <div v-else class="cpImgBox" :style="'background-image:url('+(imgUrl || defaultImg)+');background-size:'+bSize"></div>
</template>

<script>
import { reactive,toRefs,watch,onMounted } from 'vue'
export default {
    props:{
        url:{
            type:String,
            default:()=>''
        },
        bSize:String,
        type:{
            type:Number,
            default:1
        }
    },
    setup(props,context){

        const state = reactive({
            defaultImg:'/images/product-default.png',
            imgUrl:props.url
        })

        watch(()=>props.url,(newData,oldData) =>{  // 监听属性值变化
            !newData && (state.imgUrl = '/images/product-default.jpg')
            state.imgUrl = newData
        })

        onMounted(()=>{

        })

        const setDefault = (e)=>{
            console.log("setDefault:",e)
        }

        return {
            ...toRefs(state),
            setDefault
        }
    }
}
</script>

<style lang="scss" scoped>
    .cpImgBox{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
</style>